<template>
  <div class="main">
    <div class="group">
      <h3>v-show & v-if</h3>
      <div class="content">
        <p v-if="isShowP">
          当 v-if
          元素被触发，元素及其所包含的指令/组件都会销毁和重构。如果初始条件是假，那么其内部的内容根本都不会被渲染。
          场景：需要重新出发dom树渲染的时候
        </p>

        <p v-show="isShowP">
          v-show 通过设置内联样式的 display CSS 属性来工作，当元素可见时将使用初始 display
          值。当条件改变时，也会触发过渡效果。
        </p>
        <button type="button" @click="() => (isShowP = !isShowP)">控制显示和隐藏</button>
      </div>
    </div>

    <div class="group">
      <h3>v-if & v-else & v-else-if</h3>
      <div class="content">
        <p @click="shiNum = 2" v-if="shiNum == 1">独立寒秋，湘江北去，橘子洲头。</p>
        <p @click="shiNum = 1" v-else>看万山红遍，层林尽染；漫江碧透，百舸争流。</p>
        <p>鹰击长空，鱼翔浅底，万类霜天竞自由。怅寥廓，问苍茫大地，谁主沉浮？</p>
        <hr />
        <p v-if="shiNum == 1">床前明月光</p>
        <p @click="shiNum = 3" v-else-if="shiNum == 2">疑是地上霜举头望明月</p>
        <p v-else>低头思故乡</p>
      </div>
    </div>

    <div class="group">
      <h3>v-for</h3>
      <div class="content">
        <ul>
          <li v-for="item in `abcdefa`" :key="item">{{ item }}</li>
        </ul>
        <hr />
        <ul>
          <li v-for="item in 10" :key="item">{{ item }}</li>
        </ul>
        <hr />
        <ul>
          <li
            v-for="(item, key, index) in ['床前明月光', '疑是地上霜', '举头望明月', '低头吃月饼']"
            :key="item"
          >
            {{ `item:${item} - key:${key}- index:${index}` }}
          </li>
        </ul>
        <hr />
        <ul>
          <li
            v-for="(item, key) in {
              a: '床前明月光',
              b: '疑是地上霜',
              c: '举头望明月',
              d: '低头吃月饼'
            }"
            :key="item"
          >
            {{ `item:${item} - key:${key}` }}
          </li>
        </ul>
        <hr />
        <ul>
          <li
            v-for="(item, key, index) in {
              a: '床前明月光',
              b: '疑是地上霜',
              c: '举头望明月',
              d: '低头吃月饼'
            }"
            :key="item"
          >
            {{ `item:${item} - key:${key}- index:${index}` }}
          </li>
        </ul>
        <hr />
        <ul>
          <li v-for="(item, key) in mySet" :key="key">
            {{ item }}
          </li>
        </ul>
        <hr />
        <ul>
          <li v-for="(item, key) in myMap" :key="key">
            {{ `${item} - ${item[0]} - ${item[1]}` }}
          </li>
        </ul>
      </div>
    </div>

    <div class="group">
      <h3>v-model</h3>
      <div class="content">
        <p>
          inputVal: {{ inputVal }}
          <span style="color: red"
            >eg:inputVal是状态变量，只要inputVal被修改，就会渲染这部分ui的更新</span
          >
        </p>
      </div>
      <!-- <input type="text" v-model="inputVal" name="username" id="" /> -->
      <input
        type="text"
        :value="inputVal"
        @input="
          (e) => {
            // 获取input每次修改后的值打印输出
            console.log((e.target as HTMLInputElement).value)
            // 把获取到的 Input 的 value 赋值给 状态变量 inputVal
            inputVal = (e.target as HTMLInputElement).value
          }
        "
      />
      <button type="button" @click="inputVal = '修改后的inputVal'">修改 inputVal</button>
    </div>
  </div>
</template>

<script lang="ts">
export default {
  name: 'Study2StudDemo3'
}
</script>
<script setup lang="ts">
import { ref } from 'vue'

const isShowP = ref(true)

const shiNum = ref(1)

const inputVal = ref('default')

let mySet = new Set()
mySet.add('apple')
mySet.add('banana')
mySet.add('orange')
mySet.add('apple')

console.log(mySet)

let myMap = new Map()
myMap.set('apple', 2)
myMap.set('banana', 3)
myMap.set('orange', 5)

console.log(myMap)
</script>

<style lang="scss" scoped>
@import '@/assets/groupDemo.scss';
</style>
